<template>
  <div class="TaskManagement">
    <el-container>
      <el-header class="dataBoard-middle">
        <span>选择平台</span>
        <el-select v-model="value" placeholder="Select" class="el-select_div">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :size="size"
          />
        </div>
        <el-button type="primary" class="button">查询</el-button>
        <el-button type="info" class="button">清空条件</el-button>
      </el-header>
      <el-main style="background: white; margin-top: 20px">
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick" class="el_tabs">
            <el-tab-pane label="所有任务" name="first">
              <el-table
                :data="tableData"
                style="width: 100%; overflow: hidden; font-size: 12px;"
                height="58vh"
                class="el_table"
                :span-method="arraySpanMethod"
                :row-class-name="tableRowClassName"
                table-layout="auto"
              >
                <el-table-column prop="name" label="ID" align="center">
                  <!-- <img src="@/assets/appImg/douyin.png" style="width: 38px; height: 38px; border-radius: 5px" alt=""> -->
                </el-table-column>
                <el-table-column prop="name"  label="进度" align="center">
                  <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
                </el-table-column>
                <el-table-column prop="name" label="状态" align="center">
                  <img src="@/assets/images/倒计时.png" style="width: 20px; height: 20px; border-radius: 5px; vertical-align: middle" alt="">
                  <span style="margin-left: 5px">任务中</span>
                </el-table-column>
                <el-table-column prop="address" label="详情" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                  <template #default="scope">
                  <div style="color: blue">{{scope.row.address}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="类别" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
                <el-table-column prop="time" label="时间" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="视频合成任务" name="second">
              <el-table
                :data="tableData"
                style="width: 100%; overflow: hidden; font-size: 12px;"
                height="58vh"
                class="el_table"
                :span-method="arraySpanMethod"
                :row-class-name="tableRowClassName"
                table-layout="auto"
              >
                <el-table-column prop="name" label="ID" align="center">
                  <!-- <img src="@/assets/appImg/douyin.png" style="width: 38px; height: 38px; border-radius: 5px" alt=""> -->
                </el-table-column>
                <el-table-column prop="name"  label="进度" align="center">
                  <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
                </el-table-column>
                <el-table-column prop="name" label="状态" align="center">
                  <img src="@/assets/images/倒计时.png" style="width: 20px; height: 20px; border-radius: 5px; vertical-align: middle" alt="">
                  <span style="margin-left: 5px">任务中</span>
                </el-table-column>
                <el-table-column prop="address" label="详情" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                  <template #default="scope">
                  <div style="color: blue">{{scope.row.address}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="备注" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
                <el-table-column prop="time" label="时间" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="账号生成" name="third">
              <el-table
                :data="tableData"
                style="width: 100%; overflow: hidden; font-size: 12px;"
                height="58vh"
                class="el_table"
                :span-method="arraySpanMethod"
                :row-class-name="tableRowClassName"
                table-layout="auto"
              >
                <el-table-column prop="name" label="ID" align="center">
                  <!-- <img src="@/assets/appImg/douyin.png" style="width: 38px; height: 38px; border-radius: 5px" alt=""> -->
                </el-table-column>
                <el-table-column prop="name"  label="进度" align="center">
                  <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
                </el-table-column>
                <el-table-column prop="name" label="状态" align="center">
                  <img src="@/assets/images/倒计时.png" style="width: 20px; height: 20px; border-radius: 5px; vertical-align: middle" alt="">
                  <span style="margin-left: 5px">任务中</span>
                </el-table-column>
                <el-table-column prop="address" label="详情" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                  <template #default="scope">
                  <div style="color: blue">{{scope.row.address}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="账号" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
                <el-table-column prop="type" label="备注" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
                <el-table-column prop="time" label="时间" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="发布任务" name="fourth">
              <el-table
                :data="tableData"
                style="width: 100%; overflow: hidden; font-size: 12px;"
                height="58vh"
                class="el_table"
                :span-method="arraySpanMethod"
                :row-class-name="tableRowClassName"
                table-layout="auto"
              >
                <el-table-column prop="name" label="ID" align="center">
                  <!-- <img src="@/assets/appImg/douyin.png" style="width: 38px; height: 38px; border-radius: 5px" alt=""> -->
                </el-table-column>
                <el-table-column prop="name"  label="进度" align="center">
                  <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
                </el-table-column>
                <el-table-column prop="name" label="状态" align="center">
                  <img src="@/assets/images/倒计时.png" style="width: 20px; height: 20px; border-radius: 5px; vertical-align: middle" alt="">
                  <span style="margin-left: 5px">任务中</span>
                </el-table-column>
                <el-table-column prop="address" label="详情" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                  <template #default="scope">
                  <div style="color: blue">{{scope.row.address}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="账号" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
                <el-table-column prop="type" label="备注" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
                <el-table-column prop="time" label="时间" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="快速关注" name="five">
              <el-table
                :data="tableData"
                style="width: 100%; overflow: hidden; font-size: 12px;"
                height="58vh"
                class="el_table"
                :span-method="arraySpanMethod"
                :row-class-name="tableRowClassName"
                table-layout="auto"
              >
                <el-table-column prop="name" label="ID" align="center">
                  <!-- <img src="@/assets/appImg/douyin.png" style="width: 38px; height: 38px; border-radius: 5px" alt=""> -->
                </el-table-column>
                <el-table-column prop="name"  label="进度" align="center">
                  <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
                </el-table-column>
                <el-table-column prop="name" label="状态" align="center">
                  <img src="@/assets/images/倒计时.png" style="width: 20px; height: 20px; border-radius: 5px; vertical-align: middle" alt="">
                  <span style="margin-left: 5px">任务中</span>
                </el-table-column>
                <el-table-column prop="address" label="详情" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                  <template #default="scope">
                  <div style="color: blue">{{scope.row.address}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="账号" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
                <el-table-column prop="type" label="备注" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
                <el-table-column prop="time" label="时间" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="点赞评论" name="six">
              <el-table
                :data="tableData"
                style="width: 100%; overflow: hidden; font-size: 12px;"
                height="58vh"
                class="el_table"
                :span-method="arraySpanMethod"
                :row-class-name="tableRowClassName"
                table-layout="auto"
              >
                <el-table-column prop="name" label="ID" align="center">
                  <!-- <img src="@/assets/appImg/douyin.png" style="width: 38px; height: 38px; border-radius: 5px" alt=""> -->
                </el-table-column>
                <el-table-column prop="name"  label="进度" align="center">
                  <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
                </el-table-column>
                <el-table-column prop="name" label="状态" align="center">
                  <img src="@/assets/images/倒计时.png" style="width: 20px; height: 20px; border-radius: 5px; vertical-align: middle" alt="">
                  <span style="margin-left: 5px">任务中</span>
                </el-table-column>
                <el-table-column prop="address" label="详情" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                  <template #default="scope">
                  <div style="color: blue">{{scope.row.address}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="账号" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
                <el-table-column prop="type" label="备注" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
                <el-table-column prop="time" label="时间" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="群组营销" name="seven">
              <el-table
                :data="tableData"
                style="width: 100%; overflow: hidden; font-size: 12px;"
                height="58vh"
                class="el_table"
                :span-method="arraySpanMethod"
                :row-class-name="tableRowClassName"
                table-layout="auto"
              >
                <el-table-column prop="name" label="ID" align="center">
                  <!-- <img src="@/assets/appImg/douyin.png" style="width: 38px; height: 38px; border-radius: 5px" alt=""> -->
                </el-table-column>
                <el-table-column prop="name"  label="进度" align="center">
                  <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
                </el-table-column>
                <el-table-column prop="name" label="状态" align="center">
                  <img src="@/assets/images/倒计时.png" style="width: 20px; height: 20px; border-radius: 5px; vertical-align: middle" alt="">
                  <span style="margin-left: 5px">任务中</span>
                </el-table-column>
                <el-table-column prop="address" label="详情" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                  <template #default="scope">
                  <div style="color: blue">{{scope.row.address}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="账号" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
                <el-table-column prop="type" label="备注" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
                <el-table-column prop="time" label="时间" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="批量私信" name="eight">
              <el-table
                :data="tableData"
                style="width: 100%; overflow: hidden; font-size: 12px;"
                height="58vh"
                class="el_table"
                :span-method="arraySpanMethod"
                :row-class-name="tableRowClassName"
                table-layout="auto"
              >
                <el-table-column prop="name" label="ID" align="center">
                  <!-- <img src="@/assets/appImg/douyin.png" style="width: 38px; height: 38px; border-radius: 5px" alt=""> -->
                </el-table-column>
                <el-table-column prop="name"  label="进度" align="center">
                  <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
                </el-table-column>
                <el-table-column prop="name" label="状态" align="center">
                  <img src="@/assets/images/倒计时.png" style="width: 20px; height: 20px; border-radius: 5px; vertical-align: middle" alt="">
                  <span style="margin-left: 5px">任务中</span>
                </el-table-column>
                <el-table-column prop="address" label="详情" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                  <template #default="scope">
                  <div style="color: blue">{{scope.row.address}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="账号" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
                <el-table-column prop="type" label="备注" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
                <el-table-column prop="time" label="时间" align="center">
                  <!-- <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                  <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div> -->
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
        <el-pagination
          background
          layout="prev, pager, next"
          style="margin-top: 20px;  width: 400px; margin: 20px auto 0px auto"
          :total="100">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          type: '视频合成',
          time: '2022年6月14日17:51:31'
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          type: '视频合成',
          time: '2022年6月14日17:51:31'
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          type: '视频合成',
          time: '2022年6月14日17:51:31'
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          type: '视频合成',
          time: '2022年6月14日17:51:31'
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          type: '视频合成',
          time: '2022年6月14日17:51:31'
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          type: '视频合成',
          time: '2022年6月14日17:51:31'
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          type: '视频合成',
          time: '2022年6月14日17:51:31'
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          type: '视频合成',
          time: '2022年6月14日17:51:31'
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          type: '视频合成',
          time: '2022年6月14日17:51:31'
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          type: '视频合成',
          time: '2022年6月14日17:51:31'
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          type: '视频合成',
          time: '2022年6月14日17:51:31'
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          type: '视频合成',
          time: '2022年6月14日17:51:31'
        }
      ],
      activeName: 'first',

    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style scoped>
.el-select_div {
  box-shadow: 0px 0px 1px #888888;
  border-bottom: #888888 !important;
}

.TaskManagement {
  margin: 15px 20px;
}

.dataBoard-top {
  background-color: #2E54EA;
  height: 41px;
  color: white;
  line-height: 41px;
  border-radius: 3px;
  position: relative;
}

.dataBoard-top span {
  font-size: 15px;
  position: absolute;
  left: 30px;
}

.dataBoard-middle {
  /* height: 41px;
  line-height: 41px; */
  display: flex;
  align-items: center;
  background-color: #fff;
  /* justify-content: space-around; */
}

.dataBoard-middle span{
  margin-right: 20px;
  /* display: flex; */
}

.block {
  margin-left: 40px;
}

.button {
  margin-left: 40px; 
}

.button span {
  margin-right: 0;
}
</style>